import React, { Component } from "react";
import "./openFail.scss";
import { connect } from "react-redux";
import XFButton from "../../../xfCompontent/xfButton/xfButton";
import openFail from "../../../images/imageXHF/openFail.png";
import MainLayout from "../../../component/mainLayout/mainLayout";
import yhTools from "../../../tools/yh";

export class OpenFail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			btnText: "返回首页",
			subTitle: ""
		};
	}

	componentDidMount() {
		const { state = {} } = this.props.location;
		const { message, subTitle, from } = state;
		this.setState({
			subTitle,
			message,
			from
		});
	}

	componentWillUnmount() {}
	btnFn() {
		const { from } = this.state;
		if (yhTools.isXiaoHuiFu()) {
			if (from === "616") {
				yhTools.closePage({ flag: "openFail" });
			} else {
				this.props.history.push("/xhfHomeNoCredit");
			}
		} else if (yhTools.isXiaoHuiDai()) {
			this.props.history.push("/xhdHome");
		} else if (yhTools.isXiaoHuiBao()) {
			this.props.history.push("/walletHome");
		}
	}

	render() {
		const { btnText = "", message, subTitle } = this.state;
		let _pageParams = {
			header: {
				title: "开通结果",
				goBackAction: () => {
					this.btnFn();
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};
		const btnStyle = {
			height: "0.80rem",
			width: "6.96rem",
			borderRadius: ".40rem"
		};
		return (
			<MainLayout pageParams={_pageParams}>
				<div className="openFail">
					<div className="openFail-box">
						<img src={openFail} />
						<h3>{subTitle || "开通失败"}</h3>
						{/* <p>名额已抢完，请下次再来呀～</p> */}
						<p>{message}</p>
					</div>
					<XFButton
						btText={btnText}
						handleBtn={this.btnFn.bind(this)}
						btnStyle={btnStyle}
					/>
				</div>
			</MainLayout>
		);
	}
}

function mapStateToProps(state) {
	return state;
}

function mapDispatchToProps() {
	return {};
}

const OpenFailPage = connect(mapStateToProps, mapDispatchToProps)(OpenFail);
export default OpenFailPage;
